<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监视属性</title>
    <script
        type="text/javascript"
        src="../vue.js"
    ></script>
    </head>
    <body>
        <div class="p">

            <h2>今天天气怎么样？{{info}}</h2>
            <button @click="changeWeather()">切换天气</button>
            <hr>
            <h2>a的值是：{{number.a}}</h2><br>
            <button @click="number.a++">点击我让a+1</button><br>
            <h2>b的值是：{{number.b}}</h2>
            <button @click="number.b++">点击我让b+1</button><br>
        </div>
            <!--深度检测
            1.vue中的watch默认不检测对象内部值的变化（一层）
            2.配置deep：true可以检测对象内部值的变化（多层）
            3.vue自身可以检测对象内部值的变化，但是vue提供的watch默认不可以
            4.使用watch时根据数据的具体结构，决定是否采用深度检测

            -->
        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '.p',
                data: {
                    isHot: true,
                    number:{
                        a:1,
                        b:2
                    }

                },
                computed: {
                    info() {
                        return this.isHot ? '炎热' : '凉爽';
                    }
                },
                methods: {
                    changeWeather() {
                        this.isHot = !this.isHot;
                    }
                },
                watch: {
                    isHot: {
                        //immediate: true,//初始化的时候让handler调用
                        handler(newValue, oldValue) {   //回调函数
                            //handler什么时候被修改？当ishot发生变化的时候
                            console.log('ishot被修改了', newValue, oldValue)
                        }

                    },
  /*                  'number.a':{
                        handler(newValue, oldValue) {
                            console.log('a被改变了',newValue,oldValue)
                        }
                    },
*/                  number:{
                        deep:true,  //深度监视，默认false
                        handler(newValue, oldValue) {
                            console.log('number被改变了')
                        }
                    }
                },
            })
        </script>
    </body>
</html>